<template>
	<div id="login">
		<h2>—— 九鼎财富智库  ——</h2>
		<form action="" method="">
			<div class="form-item">
				<label for=""><i class="iconfont icon-shouji"></i></label>
				<input id="inpt-tel" type="tel" placeholder="请输入手机号" autocomplete="off" v-model="userTel" />
			</div>
			<div class="form-item relative">
				<label for=""><i class="iconfont icon-yanzhengma"></i></label>
				<input id="get-code" type="tel" placeholder="请输入验证码" autocomplete="off" v-model="telCode" />
				<button class="get-code-btn" v-bind:disabled="isDis" v-bind:class="codeClassObj" @click="getAuthorCode()">{{getCodeBtn}}</button>
			</div>
		</form>
		<button class="form-submit" v-bind:class="telCode == '' ? '' : 'submitClass'" v-bind:disabled="telCode == '' ? true : false" @click="formSubmit">登录</button>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	export default{
		name: 'login',
		data(){
			return{
				userTel: '',
				telCode: '',
				getCodeBtn: '获取验证码',
				isDis: false,
				isActive: true,
				count: 5
			}
		},
		methods:{
			//验证码倒计时
			'codeSetTime': function (){
				if(this.count == 0){
					this.isDis = false;
					this.getCodeBtn = '获取验证码';
					this.count = 5;
					return;   //不写retrun就会一直调用codeSetTime
				}else{
					this.isDis = true;
					this.getCodeBtn = '重新发送'+this.count+'s'
					this.count--;
				}
				setTimeout(() => {this.codeSetTime()},1000)
			},
			'formSubmit': function(){
				//获取数据，判断验证码是否正确
				console.log('提交')
			},
			'getAuthorCode': function(){
//				let el = event.currentTarget;
				let telReg = /^1[3|4|5|8][0-9]\d{4,8}$/;
				if(this.userTel == '' || this.userTel == null)
					alert('请输入手机号码')
				else if(!telReg.test(this.userTel))
					alert('请输入正确的手机号码');
//					Toast('请输入正确的手机号码')
				else{
					this.codeSetTime();
				}
			}
		},
		computed: {
			codeClassObj: function(){
				return {
					active: this.isDis && this.isActive
				}
			},
		}
	}
</script>

<style scoped>
	h2{
		padding-top: 1rem;
	}
	form{
		width: 80%;
		height: auto;
		border-radius: 4px;
		margin: 0 auto;
		margin-top: 2rem;
		padding: .3rem;
		border: .02rem solid orange;
		display: flex;
		justify-content: space-between;
		flex-flow: row wrap;
	}
	.form-item{
		width: 100%;
		margin-bottom: .2rem;
	}
	.form-item:nth-child(2){
		margin-bottom: 0;
		border-top: .02rem solid orange;
		padding-top: .22rem;
	}
	label{
		margin-left: -.4rem;
	}
	label i{
		text-align: center;
		vertical-align: middle;
		position: relative;
		top: -.05rem;
		color: orange;
	}
	input{
		padding: .2rem;
		font-size: .32rem;
		border: none;
		margin-left: .2rem;
	}
	.form-item input:nth-child(2){
		align-items: flex-end;
	}
	.get-code-btn{
		border: none;
		border-radius: .12rem;
		padding: .15rem;
		background: orange;
		color: #fff;
		position: absolute;
		top: .33rem;
		right: 0rem;
	}
	.form-submit{
		width: 90%;
		padding: .2rem;
		background: #cdcdcd;
		color: #FFFFFF;
		font-size: .4rem;
		border: none;
		margin-top: .6rem;
		border-radius: .1rem;
	}
	.active{
		background: #cdcdcd
	}
	.submitClass{
		background: orange;
	}
</style>